<template>
   <div> 
    <h1 align="center">科目设置</h1>

        <!-- 条件查询 -->
<el-form :inline="true" :model="query03" class="demo-form-inline">
  <el-form-item label="科目名称">
    <el-select v-model="query03.kemumingcheng" placeholder="科目名称">
      <el-option label="数学"></el-option>
      <el-option label="语文"></el-option>
      <el-option label="英语"></el-option>
      <el-option label="物理"></el-option>
      <el-option label="化学"></el-option>
      <el-option label="生物"></el-option>
      <el-option label="体育"></el-option>
      <el-option label="美术"></el-option>
      <el-option label="音乐"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="教研室">
    <el-select v-model="query03.jiaoyanshi" placeholder="教研室">
      <el-option label="数学教研室"></el-option>
      <el-option label="语文教研室"></el-option>
      <el-option label="英语教研室"></el-option>
      <el-option label="物理教研室"></el-option>
      <el-option label="化学教研室"></el-option>
      <el-option label="生物教研室"></el-option>
      <el-option label="体育教研室"></el-option>
      <el-option label="美术教研室"></el-option>
      <el-option label="音乐教研室"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="考核方式">
    <el-select v-model="query03.kaohefangshi" placeholder="考核方式">
      <el-option label="考试"></el-option>
      <el-option label="考核"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
    <el-button  @click="Reset">重置</el-button>
  </el-form-item>
</el-form>
 
<!-- 编辑对话框 -->
<el-dialog
  title="修改"
  :visible.sync="dialogVisible01"
  width="30%"
  :before-close="handleClose">
 <el-form :model="kemu02" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="科目名称">
    <el-select v-model="kemu02.kemumingcheng" placeholder="科目名称">
      <el-option label="数学"></el-option>
      <el-option label="语文"></el-option>
      <el-option label="英语"></el-option>
      <el-option label="物理"></el-option>
      <el-option label="化学"></el-option>
      <el-option label="生物"></el-option>
      <el-option label="体育"></el-option>
      <el-option label="美术"></el-option>
      <el-option label="音乐"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="教研室">
    <el-select v-model="kemu02.jiaoyanshi" placeholder="教研室">
      <el-option label="数学教研室"></el-option>
      <el-option label="语文教研室"></el-option>
      <el-option label="英语教研室"></el-option>
      <el-option label="物理教研室"></el-option>
      <el-option label="化学教研室"></el-option>
      <el-option label="生物教研室"></el-option>
      <el-option label="体育教研室"></el-option>
      <el-option label="美术教研室"></el-option>
      <el-option label="音乐教研室"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="考核方式">
    <el-select v-model="kemu02.kaohefangshi" placeholder="考核方式">
      <el-option label="考试"></el-option>
      <el-option label="考核"></el-option>
    </el-select>
  </el-form-item>

</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible01 = false">取 消</el-button>
    <el-button type="primary" @click="update">确 定</el-button>
  </span>
</el-dialog>
    <!-- 添加按钮 -->
     <el-button type="danger" @click="deleteByALl">批量删除</el-button>
    <el-button  type="primary" @click="dialogVisible = true">新增</el-button>
   
<el-dialog
  title="新增"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
 <el-form :model="kemu01" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="科目名称" >
    <el-select v-model="kemu01.kemumingcheng" placeholder="科目名称">
      <el-option label="数学"></el-option>
      <el-option label="语文"></el-option>
      <el-option label="英语"></el-option>
      <el-option label="物理"></el-option>
      <el-option label="化学"></el-option>
      <el-option label="生物"></el-option>
      <el-option label="体育"></el-option>
      <el-option label="美术"></el-option>
      <el-option label="音乐"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="教研室">
    <el-select v-model="kemu01.jiaoyanshi" placeholder="教研室">
      <el-option label="数学教研室"></el-option>
      <el-option label="语文教研室"></el-option>
      <el-option label="英语教研室"></el-option>
      <el-option label="物理教研室"></el-option>
      <el-option label="化学教研室"></el-option>
      <el-option label="生物教研室"></el-option>
      <el-option label="体育教研室"></el-option>
      <el-option label="美术教研室"></el-option>
      <el-option label="音乐教研室"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="考核方式">
    <el-select v-model="kemu01.kaohefangshi" placeholder="考核方式">
      <el-option label="考试"></el-option>
      <el-option label="考核"></el-option>
    </el-select>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="add">确 定</el-button>
  </span>
</el-dialog>

     <el-table
    :data="tableData"
    style="width: 100%"
    border
    @selection-change="handleSelectionChange">
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
     <el-table-column
      label="序号"
      type="index"
      :index="indexMethod">
    </el-table-column>
    <el-table-column
      label="科目名称"
      width="180"
      align="center">
      <template slot-scope="scope">
        <el-tag size="medium">{{ scope.row.kemumingcheng }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      label="所属教研室名称"
      width="180"
      align="center">
      <template slot-scope="scope">
        <el-tag size="medium">{{ scope.row.jiaoyanshi }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      label="考试方式"
      width="180" 
      lign="center">
      <template slot-scope="scope">
        <el-tag size="medium">{{ scope.row.kaohefangshi }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>


   <!-- 分页 -->
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="page.arr"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.count">
    </el-pagination>
  </div>
   </div>
</template>

<script>
export default {
   name:"kemu",
   data() {
    return {
         // 复选框模型数据
         multipleSelection: [],
         kemu02: {
            kemumingcheng: '',
            jiaoyanshi: '',
            kaohefangshi: ''
          },
          kemu01: {
            kemumingcheng: '',
            jiaoyanshi: '',
            kaohefangshi: ''
          },
           
        rules: {
         kemumingcheng: [
            { required: true, message: '请选择科目名称', trigger: 'blur' }
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          jiaoyanshi: [
            { required: true, message: '请选择教研室', trigger: 'blur' }
          ],
          kaohefangshi: [
            { required: true, message: '请选择考试方式', trigger: 'blur' }
          ] 
          },
          // 修改窗口是否显示
            dialogVisible01: false,
            // 添加窗口是否显示
            dialogVisible: false,
            // 查询
            query03: {
                id: '',
                kemumingcheng: '',
                jiaoyanshi: '',
                kaohefangshi: ''
               
            },
            page: {
              currentPage: 0,
              pageSize: 5,
              arr: [5, 10, 15, 20],
              count: 100
            },
            tableData: [{
                    kemumingcheng: '数学',
                    jiaoyanshi: '数学教研室',
                    kaohefangshi: '考试'
                }, {
                    kemumingcheng: '英语',
                    jiaoyanshi: '英语教研室',
                    kaohefangshi: '考试'
                }, {
                    kemumingcheng: '语文',
                    jiaoyanshi: '语文教研室',
                    kaohefangshi: '考试'
                },{
                    kemumingcheng: '物理',
                    jiaoyanshi: '物理教研室',
                    kaohefangshi: '考试'
                }, {
                    kemumingcheng: '化学',
                    jiaoyanshi: '化学教研室',
                    kaohefangshi: '考试'
                },{
                    kemumingcheng: '生物',
                    jiaoyanshi: '生物教研室',
                    kaohefangshi: '考试'
                },{
                    kemumingcheng: '美术',
                    jiaoyanshi: '美术教研室',
                    kaohefangshi: '考查'
                },{
                    kemumingcheng: '体育',
                    jiaoyanshi: '体育教研室',
                    kaohefangshi: '考查'
                },{

                    kemumingcheng: '音乐',
                    jiaoyanshi: '音乐教研室',
                    kaohefangshi: '考查'
                }]
        }
   },
   methods: {
     handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection)
    },
    // 分页
       handleSizeChange(val) {
        this.page.pageSize = val;
    
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page.currentPage = val;
       
        console.log(`当前页: ${val}`);
      },
    // 条件查询 
       onSubmit() {
        console.log('submit!');
      },
      // 重置
      Reset() {
          this.query03 = {}
      },
    // 编辑
    handleEdit(index, row) { 
        this.kemu02 = row;
        this.dialogVisible01 = true;
    },
    // 添加
    add() {
      this.dialogVisible = false;
    },
    // 删除
      handleDelete(index, row) { },
      // 批量删除
      deleteByALl() {

      },
     // 编号
       indexMethod(index) {
        return (this.page.currentPage - 1) * this.page.pageSize + 1 + index;
      }
   },
}
</script>

<style>

</style>